import React from 'react';
import ReactDOM from 'react-dom';
import * as Sys from '../sys';
import * as SysApi from '../sys.api';

import { PageHeader } from '../components/page-header';
import { Content, PageTitle } from '../components/content';
import { PageFooter } from '../components/page-footer';
import { Button } from '../components/buttons';
import * as DemoErrorApi from './error.api';

DemoErrorApi.register();

interface IApp {
    result: string,
    error: string,
    running: boolean,
}

export class App extends React.Component<{}, IApp> {
    constructor(props: {}) {
        super(props);

        this.state = {
            result: '',
            error: '',
            running: false,
        };
    }


    private run = (evt: React.MouseEvent<HTMLButtonElement>) => {
        this.setState({
            result: '',
            error: '',
            running: true,
        });

        const seq = evt.currentTarget.getAttribute('data-key');

        SysApi.call('demo.error' + seq, null, true)
            .then(data => this.setState({
                running: false,
                result: data !== null && data !== undefined ? JSON.stringify(data) : '',
                error: '',
            }))
            .catch(err => this.setState({
                running: false,
                result: '',
                error: err !== null && err !== undefined ? 'code=' + err.code + ', extra=' + JSON.stringify(err.extras) : '',
            }));
    };

    render(): JSX.Element {
        return <>
            <PageHeader current={90} />
            <Content>
                <PageTitle>Handle error</PageTitle>
                <div className="ui segment">
                    <div className="ui divided grid">
                        <div className="row">
                            <div className="four wide column center aligned">
                                <p className="row">
                                    <Button value="参数无法匹配(400)" data-key={1} onClick={this.run} />
                                </p>
                                <p className="row">
                                    <Button value="参数不合法(400)" data-key={2} onClick={this.run} />
                                </p>
                                <p className="row">
                                    <Button value="找不到服务(404)" data-key={3} onClick={this.run} />
                                </p>
                                <p className="row">
                                    <Button value="未登录(401)" data-key={4} onClick={this.run} />
                                </p>
                                <p className="row">
                                    <Button value="无权访问(403)" data-key={5} onClick={this.run} />
                                </p>
                                <p className="row">
                                    <Button value="不可预料错误(500)" data-key={6} onClick={this.run} />
                                </p>
                                <p className="row">
                                    <Button value="业务逻辑错误(500)" data-key={7} onClick={this.run} />
                                </p>
                            </div>
                            <div className="twelve wide column">
                                {this.state.running &&
                                    <div className="ui placeholder">
                                        <div className="line" />
                                        <div className="line" />
                                        <div className="line" />
                                    </div>
                                }
                                {
                                    this.state.result &&
                                    <div className="ui positive message">{this.state.result}</div>
                                }
                                {
                                    this.state.error &&
                                    <div className="ui negative message">{this.state.error}</div>
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </Content>
            <PageFooter />
        </>
    }
};

Sys.ready(() => ReactDOM.render(<App />, document.getElementById('root')!));